import { Space, Divider , Radio, Form, Input,Button,Card } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
import { queryPatrolRecordData,updateOrSavePatrolRecordItem,updatePatrolRecord } from '@/services/patrolrecord';
import { history, useModel } from 'umi';
const { TextArea } = Input;
import React, { useState, useRef, useEffect } from 'react';

import styles from './index.less';
import deviceImg from '@/assets/test.jpg';

const TableList: React.FC = (props:any) => {
  const { params } = props.match;
  const { initialState } = useModel('@@initialState');
  const { dicts } = initialState || {};
  const [formVals,setFormVals] = useState<any>();
  const [isWorks,setIsWorks] = useState<any>();
  const [leveEnumValues, setLeveEnumValues] = useState({});
  const [typeEnumValues, setTypeEnumValues] = useState({});
 
  const [form] = Form.useForm();
  const onFinish = (values: any) => {
    updatePatrolRecord({id:formVals.record.id,isConform:0})
    history.push("/mochaITOM/patrolRecordDetails1/result/"+params.jobId)
  };


   
  const updateRecord = async (e,index) => {
    const fieldsValue = await form.getFieldsValue(true);
    const item=fieldsValue.sights[index];
    item.recordId=formVals.record.id;
    item.jobItemId=item.id;
    await updateOrSavePatrolRecordItem(item);
  };



    const setStateData = async () => {
      const records = await   queryPatrolRecordData(params);
      var isWorks1=[];
      for(let item of  records.sights){
        isWorks1.push(item.isWorks);
      }
    
      setIsWorks(isWorks1);
      setFormVals(records);
    };
console.log(isWorks)
useEffect(() => {
  setStateData();
  if (dicts) {
    setLeveEnumValues(dicts["7Enum"]);
    setTypeEnumValues(dicts["4Enum"]);
 
  }
 }, []);


  return (
    <div className={styles.main} >
        <Card  title={formVals?.record?.jobName} headStyle={{textAlign: 'center',background:'rgb(68 120 221)'}}  bodyStyle={{background:'rgb(55 94 187)'}}>
      {formVals?(
       <Form  form={form} name="dynamic_form_nest_item"   onFinish={onFinish}  initialValues={formVals} >  
        {/* <div >
          <center>
            <h1> 巡检任务1</h1>
          </center>
        </div>
        <Divider /> */}

     {isWorks?<Form.List name="sights">
        {(fields, { add, remove }) => (
          <>
            {fields.map(field => (
              <Space key={field.key} className={styles.item} >
                <div className={styles.stem}>
                  <p className={styles.stem1}> {formVals?.sights[field.fieldKey].index} . ({leveEnumValues[formVals?.sights[field.fieldKey].importantLevel]}) {formVals?.sights[field.fieldKey].content}</p>
                  <p className={styles.stem2}>位置:{formVals?.sights[field.fieldKey].areaName} {formVals?.sights[field.fieldKey].position} 项目类别:{typeEnumValues[formVals?.sights[field.fieldKey].patroItemlType]}</p>
                </div>
                <div className={styles.answer}>
               
                <Form.Item
                
                  name={[field.name, 'isWorks']}
                  label=""
                  rules={[{ required: true, message: 'Please pick an item!' }]}
                >
                  <Radio.Group  disabled={formVals.record.isConform!=null} onChange={(e)=>{
                    var isWorks1=[...isWorks];
                    isWorks1[field.fieldKey]=e.target.value;
                    setIsWorks(isWorks1);
                   
                    updateRecord(e,field.fieldKey)
                  }}>
                    <Radio value={1}>正常</Radio>
                    <Radio value={0 }>故障</Radio>
                  </Radio.Group>
                </Form.Item>
                {isWorks[field.fieldKey]==0?(
                  <>
                    <Form.Item
                    {...field}
                    name={[field.name, 'defectInfo']}
                 
                    rules={[{ required: true, message: '请输入缺陷描述' }]}
                  >
                    <Input  disabled={formVals.record.isConform!=null}   onChange={(e)=>{updateRecord(e,field.fieldKey)}}     placeholder="请输入缺陷描述"/>
                  </Form.Item>
                  <Form.Item
                    {...field}
                
                    name={[field.name, 'memo']}
                    rules={[{ message: '请输入备注' }]}
                  >
                    <TextArea     disabled={formVals.record.isConform!=null}  onChange={(e)=>{updateRecord(e,field.fieldKey)}}     placeholder="请输入备注" rows={2}  maxLength={255}  />
                  </Form.Item>
                </>
               ):null}
             
                </div>
             

          
              </Space>
            ))}


          </>


        )}
      </Form.List>:null}
      {formVals.record.isConform==null?<Form.Item  >
        <Button type="primary" htmlType="submit"  style={{float:'right'}}>
          提交
        </Button>
      </Form.Item>:null}
      
    </Form>):null} 
    </Card>
    </div>
  );
};

export default TableList;
